---
description:
  SvelteKit is the fastest way to build svelte apps. It is very simple, and let you build frontend &
  backend in a single place.
---

# Integration with SvelteKit

[SvelteKit is the fastest way to build svelte apps.](https://kit.svelte.dev) It is very simple, and
let you build frontend & backend in a single place.

You can add GraphQL Yoga with a few lines of code and get the benefits of GraphQL & SvelteKit at the
same time. [Envelop ecosystem](https://www.envelop.dev) for example!

## Installation

In a SvelteKit project:

```sh npm2yarn
npm i graphql-yoga graphql
```

## Example

### Create your graphql endpoint

Create the file `src/routes/api/graphql/+server.ts`:

```ts filename="src/routes/api/graphql/+server.ts"
import { createSchema, createYoga } from 'graphql-yoga'
import type { RequestEvent } from '@sveltejs/kit'

const yogaApp = createYoga<RequestEvent>({
  schema: createSchema({
    typeDefs: `
			type Query {
				hello: String
			}
		`,
    resolvers: {
      Query: {
        hello: () => 'SvelteKit - GraphQL Yoga'
      }
    }
  }),
  // Needed to be defined explicitly because our endpoint lives at a different path other than `/graphql`
  graphqlEndpoint: '/api/graphql',

  // Needed to let Yoga use sveltekit's Response object
  fetchAPI: { Response }
})

export { yogaApp as GET, yogaApp as POST, yogaApp as OPTIONS }
```

> **Simple example** on our GitHub repository
> [here](https://github.com/graphql-hive/graphql-yoga/tree/main/examples/sveltekit).

> More examples with our **KitQL** library [here](https://github.com/jycouet/kitql). <br /> The best
> of all GraphQL ecosystem for SvelteKit.
